<template>
  <d2-container :filename="filename">
    <el-row>
      <el-form label-width="80px" ref="updateForm" :inline="true">
        <el-form-item>
          <el-button
            type="primary"
            v-has="'search'"
            @click="search()"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button
            type="primary"
            v-has="'add'"
            @click="add()"
            icon="el-icon-plus"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <el-form label-width="80px" ref="searchForm" :inline="true">
        <el-form-item label="关键词" prop="keyword">
          <el-input v-model="userSearch.keyword" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="isActive">
          <el-select
            v-model="userSearch.isActive"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row>
      <el-row>
        <el-table
          :data="userTableData"
          stripe
          style="width: 100%;"
          element-loading-text="加载中"
          v-loading="searchLoading"
          border=""
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top-start"
                >
                  <el-button
                    type="danger"
                    v-has="'delete'"
                    size="mini"
                    icon="el-icon-delete"
                    @click="deleteRow(scope.row)"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="修改"
                  placement="top-start"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="updateRow(scope.row)"
                    size="mini"
                    v-has="'edit'"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="重置密码"
                  placement="top-start"
                >
                  <el-button
                    type="danger"
                    icon="el-icon-refresh"
                    @click="reset(scope.row)"
                    size="mini"
                    v-has="'resetpassword'"
                    circle
                  ></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="userName" label="用户名"> </el-table-column>
          <el-table-column prop="isActive" label="是否激活">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isActive" disabled></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="emailAddress" label="邮箱"> </el-table-column>
          <el-table-column prop="creationTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="lastLoginTime" label="上次登录时间">
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 500]"
          :page-size="userSearch.maxResultCount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userSearch.total"
        >
        </el-pagination>
      </el-row>
    </el-row>

    <createModel ref="createModel" @fromvisible="pageReload"></createModel>
    <resetpassword ref="resetpassword"></resetpassword>
  </d2-container>
</template>

<script>
import { GetUserListAll, Delete } from '@api/systemManage/userManage'
import createModel from '@/pages/systemManage/userManage/createModel'
import resetpassword from '@/pages/systemManage/userManage/resetpassword'
export default {
  name: 'userManage',
  inject: ['reload'],
  components: { createModel, resetpassword },
  data () {
    return {
      filename: __filename,
      searchLoading: false,
      userSearch: {
        skipCount: 0,
        maxResultCount: 20,
        total: 0,
        keyword: '',
        isActive: ''
      },
      userTableData: [],
      options: [
        {
          value: false,
          label: '锁定'
        }, {
          value: true,
          label: '激活'
        }
      ]
    }
  },
  created () {
    this.search()
  },
  methods: {
    reset (row) {
      this.$refs.resetpassword.show(row.id, row.name)
    },
    deleteRow (row) {
      this.$confirm('是否删除用户[' + row.name + ']?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(row.id).then(res => {
          if (res.success) {
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'

            })
            this.reload()
          }
        })
      })
    },
    updateRow (row) {
      this.$refs.createModel.show(row.id, '修改')
    },
    add () {
      this.$refs.createModel.show('', '新增')
    },
    pageReload () {
      this.search()
    },
    search () {
      this.userSearch.skipCount = 0
      this.getUserAll()
    },
    getUserAll () {
      this.searchLoading = true
      GetUserListAll(this.userSearch).then(res => {
        if (res.success) {
          this.searchLoading = false
          this.userTableData = res.result.items
          this.userSearch.total = res.result.totalCount
        }
      })
    },
    handleSizeChange (val) {
      this.userSearch.maxResultCount = val
      this.getUserAll()
    },
    handleCurrentChange (val) {
      this.userSearch.skipCount = val - 1
      this.getUserAll()
    }
  }
}
</script>
